<template>
  <div class="container-wrap">
    <v-header></v-header>
    <div class="container">
      <div class="container1">
        <p class="con-tit">
          <span class="title-tips">{{ classifyName }}</span>
        </p>
        <p class="describe" v-if="questionStem">
          描述:
          <span>{{ questionStem }}</span>
        </p>
        <p class="con-main" v-html="article"></p>
      </div>
      <div class="container2">
        <li v-for="(bq, bindex) in this.lists" :key="bindex">
          <div class="small-topic">
            <span class="small-index">{{ bindex + 1 }}.</span>
            <span v-html="bq.context"></span>
          </div>
          <div
            v-if="
              classifyName == '单项选择题' ||
                classifyName == '判断题' ||
                classifyName == '顺序选择题' ||
                classifyName == '匹配题'
            "
          >
            <div class="small-options" v-for="sq in bq.ops" :key="sq.id">
              <label>
                <input type="radio" :name="bq.id" />
                <span v-html="sq.value"></span>
              </label>
            </div>
          </div>
        </li>
      </div>
      <!-- 添加笔记 -->
      <van-dialog
        v-model="shownote"
        title="复习笔记"
        show-cancel-button
        confirm-button-text="保存"
        :beforeClose="noteBtn"
      >
        <textarea v-model="message" placeholder="要记点什么吗"></textarea>
      </van-dialog>
      <!-- 查看答案 -->
      <van-dialog v-model="showanswer" title="查看答案">
        <div
          class="form-group"
          v-for="(o, oindex) in this.trueOps"
          :key="oindex"
        >
          <label class="index col-lg-1 col-md-1 col-sm-1 col-xs-12">
            <span>{{ oindex + 1 }}.</span>
          </label>
          <label v-if="o.mediaType == 0">
            <span v-html="o.value"></span>
          </label>
          <label
            v-if="o.mediaType == 1"
            class="col-lg-8 col-md-8 col-sm-8 col-xs-12"
          >
            <audio-tag :id="o.id" :url="o.pathUrl" :type="'b'"></audio-tag>
          </label>
          <label
            v-if="o.mediaType == 2"
            class="col-lg-8 col-md-8 col-sm-8 col-xs-12"
          >
            <span v-html="o.value"></span>
          </label>
          <label
            v-if="o.mediaType == 3"
            class="col-lg-8 col-md-8 col-sm-8 col-xs-12"
          >
            <img
              alt="大题图片"
              :src="o.pathUrl"
              title="查看图片"
              width="250"
              height="250"
            />
          </label>
        </div>
      </van-dialog>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import header from "@/components/content/header";
import footer from "@/components/content/footer";
import api from "@/api/api";
import { Swipe, SwipeItem, Toast, Dialog } from "vant";
import { mapGetters } from "vuex";

export default {
  name: "deepread",
  components: {
    "v-header": header,
    "v-footer": footer,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      isFavorite: false, // 是否已收藏
      Favorite: require("@/assets/collect.png"),
      Favorited: require("@/assets/collected.png"),
      show: false,
      list: [], // 深度阅读的 data
      lists: [], //查询小题
      name: "",
      questionStem: "", //描述
      classifyName: "",
      roleid: "", //用户登录的角色id
      id: "", //题目对应的id
      article: "", // 文章内容
      index: "", // data 的索引
      indexs: 0, // data 的索引
      question: [], // 小题的数组
      total: "", // 小题总数
      answer: [], // 题目的选项
      num: "1", // 第几小题  1/4
      options: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"], // 选项前的标签
      container: [], // 放每个小题选中的索引
      solution: [], // 提交答案的数组 内容
      deep: {}, // 提交答案的对象 索引
      prevRoute: "",
      message: "",
      shownote: false,
      showanswer: false,
      trueOps: []
    };
  },
  created() {
    this.getDeep();
  },
  computed: {
    ...mapGetters(["deepAnswer"])
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next(vm => {
      vm.geturl(from.name);
    });
  },
  methods: {
    //查看答案
    showAnswer() {
      this.showanswer = true;
    },
    // 显示笔记
    showNote() {
      this.shownote = true;
    },
    //查询题目
    getDeep() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.teacherid = this.$route.query.teacherid;
      this.type = this.$route.query.type;
      this.roleid = this.$route.query.roleid;
      console.log(this.teacherid);
      console.log(this.type);
      console.log(this.roleid);
      api
        .Entrances(this.teacherid, this.type, "%2525%2525")
        .then(res => {
          console.log(res);
          this.list = res.result; // 深度阅读的 data
          this.article = this.list[0].context;
          this.classifyName = this.list[0].classifyName;
          this.id = this.list[0].id;
          console.log(this.list);
          console.log(this.article);
          console.log("sqs:", this.list.sqs);
          //根据进入训练查询出来的第一个题目id,查出第一个题目的所有内容，包括小题和选项
          api
            .Questions(this.id, this.roleid)
            .then(res => {
              console.log("a:", res);
              console.log("b:", this.id);
              console.log("ba:", res.result.sqs);
              this.lists = res.result.sqs;

              this.questionStem = res.result.questionStem;
            })
            .catch(error => {
              console.log(error);
            });
          api
            .Chakan(this.id)
            .then(res => {
              console.log("b:", this.id);
              this.trueOps = res.result;
              console.log(res);
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(error => {
          console.log(error);
        });
    },

    //点击题目名称显示题目的小题和选项
    bqinx() {
      console.log(this.list);
      if (this.indexs < this.list.length) {
        this.indexs++;
        console.log(this.list[this.indexs].id);
        console.log(this.index);
        this.article = this.list[this.indexs].context;
        console.log(this.article);
        this.classifyName = this.list[this.indexs].classifyName;
        api
          .Questions(this.list[this.indexs].id, this.roleid)
          .then(res => {
            console.log(res);
            this.classifyName = res.result.classifyName;
            this.lists = res.result.sqs;
          })
          .catch(error => {
            console.log(error);
          });
        api
          .Chakan(this.list[this.indexs].id)
          .then(res => {
            console.log("b:", this.id);
            this.trueOps = res.result;
            console.log(res);
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    //点击题目名称显示题目的小题和选项
    bqins() {
      console.log(this.list);
      console.log(this.indexs);
      if (this.indexs > 0) {
        this.indexs--;
        console.log(this.list[this.indexs].id);
        console.log(this.index);
        this.article = this.list[this.indexs].context;
        this.classifyName = this.list[this.indexs].classifyName;
        api
          .Questions(this.list[this.indexs].id, this.roleid)
          .then(res => {
            console.log(res);

            this.lists = res.result.sqs;
          })
          .catch(error => {
            console.log(error);
          });
        api
          .Chakan(this.list[this.indexs].id)
          .then(res => {
            console.log("b:", this.id);
            this.trueOps = res.result;
            console.log(res);
          })
          .catch(error => {
            console.log(error);
          });
      }
    },

    // 头部 1/4 1的索引
    onChange(index) {
      this.num = index + 1;
    },

    // 小题的选中
    IsActive(detail, ind, index) {
      this.$set(this.container, index, ind); // set顺序必须和上面class:active一样  修改container，使得视图可以及时刷新。
      console.log("第" + `${index + 1}` + "道题,选项是" + detail);
      // console.log(this.container)
    },

    // 收藏    没写返回数据给后台
    toggleCollect() {
      if (this.isFavorite) {
        this.isFavorite = false;
        Toast("取消收藏");
      } else {
        this.isFavorite = true;
        Toast("收藏成功");
      }
    },

    // 添加笔记
    noteBtn(action, done) {
      if (action === "cancel") {
        this.shownote = false;
        done();
      } else if (action === "confirm") {
        if (!this.message) {
          Toast("请输入笔记,再保存");
          done(false);
        } else {
          console.log("深度阅读笔记:", this.message);
          this.shownote = false;
          this.message = "";
          done();
        }
      }
    },

    // 提交
    submit() {
      Dialog.confirm({ message: "是否提交试题?" })
        .then(() => {
          Toast.success("提交成功");
          this.question.forEach((item, index) => {
            let a = this.container[index];
            if (a === undefined) {
              this.solution.push(null);
              this.deep[index] = null;
            } else {
              this.solution.push(item.answer[a].option);
              this.deep[index] = a;
            }
          });
          setTimeout(() => {
            console.log("深度阅读", this.solution);
            this.$store.dispatch("deepAnswer", this.deep);
            this.$router.push({ path: "/reportread" });
          }, 2000);
        })
        .catch(() => {
          // 取消
        });
    },

    geturl(url) {
      this.prevRoute = url;
      // console.log(this.prevRoute)
      if (url == "readtype") {
        this.$store.dispatch("showAnswer", false);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container-wrap {
  height: 100vh;
  overflow: hidden;
}
.container {
  font-size: 16px;
  padding: 5px 10px;
  height: calc(100% - 2.346666rem);
  margin-top: 1.173333rem;
  background-color: #fff;
  box-sizing: border-box;
  .container1 {
    height: 50%;
    overflow-y: auto;
    margin-bottom: 2%;
    border-bottom: 1px dashed #999;
    .con-main {
      margin: 10px 0;
      /deep/ div {
        margin: 10px 0;
      }
    }
  }
  .container2 {
    height: 48%;
    overflow-y: auto;
    li {
      margin: 15px 0;
      .small-topic {
        font-weight: bold;
        margin-top: 10px;
        overflow: hidden;

        span {
          font-weight: bold;
          /deep/ p {
            font-weight: bold;
          }
        }
        .small-index {
          float: left;
          margin-right: 5px;
        }
      }
      .small-options {
        margin: 15px 0;
        overflow: hidden;
        input {
          float: left;
          margin-right: 5px;
        }
      }
    }
  }
  .con-tit {
    margin: 10px 0;
    .title-tips {
      font-weight: bold;
      color: #333;
    }
  }
  .describe {
    border: 1px dashed rgb(114, 88, 88);
    padding: 10px;
    /deep/ i {
      font-style: normal;
    }
  }
  /deep/ .van-dialog {
    top: 10px;
    left: calc(50% - 4.26rem);
    height: calc(100vh - 20px);
    overflow: hidden;
    transition: none;
    transform: none;
    display: flex;
    flex-direction: column;
    .van-dialog__content {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      .form-group {
        display: flex;
        margin: 10px 0;
      }
      .index {
        min-width: 16px;
        text-align: right;
        margin-right: 5px;
      }
    }
  }
}
.deep-con {
  margin: 5px 0;
  background: #fff;
  padding: 10px;
  height: 230px;
  overflow-y: auto;
  .con-tit {
    font-size: 16px;
    color: #333;
    line-height: 20px;
  }
  .con-main {
    font-size: 16px;
    color: #333;
    line-height: 24px;
    text-align: justify;
    margin-top: 5px;
    text-indent: 2em;
  }
}
.bqform-control {
  font-weight: bold;
  height: 32px;
  padding: 5px 8px;
  margin: 5px;
  color: #222;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
}
.bar {
  height: 36px;
  background: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 5px;
  span {
    font-size: 14px;
    color: #656565;
    line-height: 36px;
    position: absolute;
    left: 10px;
    top: 0;
  }
  img {
    display: inline-block;
    width: 36px;
    line-height: 36px;
  }
}
.deep-main {
  padding: 5px 10px;
  background: #fff;
  height: calc(100% - 345px);
  box-sizing: border-box;
  overflow-y: auto;
}
.item-tit {
  font-size: 16px;
  color: #333;
  line-height: 24px;
  text-align: justify;
  margin-bottom: 10px;
}
.box-item {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-left {
    width: 32px;
    height: 32px;
    border: 1px solid #ff6400;
    border-radius: 16px;
    box-sizing: border-box;
    background: #fff;
    color: #ff6400;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
  }
  .active {
    background: #ff6400;
    color: #fff;
  }
  .item-right {
    width: calc(100% - 40px);
    text-align: justify;
    font-size: 16px;
    color: #333;
    line-height: 22px;
  }
}
.answer {
  font-size: 16px;
  color: #333;
}
.analyse {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  .detail {
    text-align: justify;
    line-height: 24px;
    margin: 10px 0 30px;
  }
}
.disabeld {
  pointer-events: none;
}
textarea {
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
</style>
